<template>
  <div class="CartPage">
    <div class="cartWrapper">
      <div class="left_cartInfo">
        <h4 class="left_cartInfo_title">购物车</h4>

        <div class="left_cartInfo_box" v-for="(item,index) in cartList" :key="index">
          <div class="left_cartInfo_box_1">
          <div class="cart_item">
            <div class="item_part_left">
              <div class="item_image">
                <a href="">
                  <img class="item_imageEp" :src="'/static/gd/'+item.imgLink" alt="">
                </a>
              </div>
              <div class="item_content"></div>
            </div>
            <div class="item_part_rightetss">
              <div class="item_part_right">
                <div class="item_part_rl">
                  <div class="item_part_rl_content">
                    <a class=""><p class="item_part_rl_content_p">{{item.gname}} ({{item.cartId}}) </p></a>
                    <div class="item_part_rl_content_p2">{{item.detailName}}</div>
                    <div class="item_part_rl_content_p2">{{item.goodsColor}} [标准Size] </div>
                      <div style="display:flex;">
                        
                        <div class="item_part_rl_content_p3">
                           <span class="item_part_rl_content_span2"> 数量:  </span>
                             <el-input-number @change="addSize(item.cardId)" size="small" :min="1" v-model="item.goodsNum">{{ item.goodsNum }}</el-input-number>
                        </div>
                        <!-- <div class="item_part_rl_content_p3">
                          <span class="item_part_rl_content_span1"> 颜色: </span>
                          <div class="item_part_rl_content_select1 " style="cursor:pointer;">
                            <el-select v-model="value" placeholder="请选择" class="item_part_rl_select1 ircs">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  :disabled="item.disabled">
                                </el-option>
                              </el-select>
                          </div>
                        </div> -->
                        
                      </div>
                  </div>
                </div>
                <div class="item_part_rr">
                  <span class="item_part_rr_1">
                    <span class="item_part_rr_price">¥{{item.gprice}}.00</span>
                  </span>
                </div>
              </div>

              <div class="item_part_action">
                <ul>
                  <li class="item_info_btn">
                    <button class="btns" title="添加收藏"><svg t="1673373926197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5071" width="32" height="32"><path d="M766.976 692.224h-190.464c-14.336 0-26.112-11.776-26.112-26.112s11.776-26.112 26.112-26.112h190.464c14.336 0 26.112 11.776 26.112 26.112s-11.776 26.112-26.112 26.112z" fill="#000000" p-id="5072"></path><path d="M645.632 761.344v-190.464c0-14.336 11.776-26.112 26.112-26.112s26.112 11.776 26.112 26.112v190.464c0 14.336-11.776 26.112-26.112 26.112s-26.112-11.776-26.112-26.112zM508.928 855.552c-6.656 0-12.8-2.56-17.92-7.168l-299.008-299.008c-43.008-43.008-67.072-100.864-67.072-161.792s24.064-118.784 67.072-161.792c42.496-42.496 103.424-58.368 171.008-45.056 57.856 11.264 116.736 43.52 161.28 88.064 9.728 9.728 9.728 26.112 0 35.84-9.728 9.728-26.112 9.728-35.84 0C415.232 231.424 294.912 194.048 227.84 261.12c-33.792 33.792-52.224 78.336-52.224 125.952s18.432 92.672 52.224 125.952l299.008 299.008c9.728 9.728 9.728 26.112 0 35.84-5.12 5.632-11.264 7.68-17.92 7.68z" fill="#000000" p-id="5073"></path><path d="M812.544 556.544c-6.656 0-12.8-2.56-17.92-7.168-9.728-9.728-9.728-26.112 0-35.84 33.792-33.792 52.224-78.336 52.224-125.952s-18.432-92.672-52.224-125.952c-41.472-41.472-98.816-38.4-129.536-33.28-50.176 8.704-101.888 35.84-138.24 72.192-9.728 9.728-26.112 9.728-35.84 0-9.728-9.728-9.728-26.112 0-35.84 44.032-44.032 104.448-75.776 165.376-86.016 69.632-12.288 131.584 4.608 174.08 47.104 43.008 43.008 67.072 100.864 67.072 161.792 0 60.928-23.552 118.784-67.072 161.792-5.12 4.608-11.776 7.168-17.92 7.168z" fill="#000000" p-id="5074"></path></svg></button>
                  </li>
                  <li class="item_info_btn">
                    <button class="btns" title="移除" @click="del_cart(item.cartId)">
                      <svg t="1673374064634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6211" width="32" height="32"><path d="M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z" fill="" p-id="6212"></path><path d="M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999zM640.84 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z" fill="" p-id="6213"></path></svg></button></li>
                </ul>
              </div>

            </div>
          </div>
          <!-- /* 说明 运费 位置 */ -->
          <div class="item_explain_box">
            <div class="item_explain_box_1">
              <div class="item_explain_info_1">超快配送</div>
              <div class="item_explain_info_2">
                <!-- 1月18日周三 -->
                <!-- <div class="item_explain_editSite">
                  <button class="item_explain_btn">编辑位置</button>
                </div> -->
              </div>

            </div>
          </div>
          </div>
        </div>
      </div>

      <div class="right_cartbill">
        <div class="right_cartbill_1">
          <h4 class="right_cartbill_h4">摘要</h4>
          <div class="cartbill_smallTotal">小计
            <el-tooltip class="item" effect="dark" :content=smallTotalINfo placement="bottom">
              <div class="cartbill_smallTotal_icon"><svg t="1673377191907" class="icon" viewBox="0 0 1024 1024"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9820" width="12" height="12">
                  <path
                    d="M512 4.12672c280.49408 0 507.87328 227.3792 507.87328 507.87328 0 280.49408-227.3792 507.87328-507.87328 507.87328C231.50592 1019.87328 4.12672 792.49408 4.12672 512 4.12672 231.50592 231.50592 4.12672 512 4.12672zM512 685.96736c-42.47552 0-76.91264 34.42688-76.91264 76.91264 0 42.47552 34.43712 76.91264 76.91264 76.91264 42.47552 0 76.91264-34.43712 76.91264-76.91264C588.91264 720.39424 554.47552 685.96736 512 685.96736zM509.78816 625.83808c36.58752 0 66.24256-29.66528 66.24256-66.24256l0-309.1456c0-36.58752-29.65504-66.24256-66.24256-66.24256-36.58752 0-66.24256 29.66528-66.24256 66.24256l0 309.1456C443.5456 596.18304 473.20064 625.83808 509.78816 625.83808z"
                    fill="#272636" p-id="9821"></path>
                </svg>
                </div>
            </el-tooltip>
            <div class="price_smallTotal">
              <span class="price_smallTotal_info">¥ {{allPrice-22}}.00</span>
            </div>
          </div>
          <div class="cartbill_smallTotal">预计运费和手续费
            <div class="price_smallTotal">
              <span class="price_smallTotal_info">¥ 22.00</span>
            </div>
          </div>
          <!-- 总计 -->
          <div class="final_total_cartBill final_total_cartBill_2">
            <p>总计</p>
            <span>
              <span class="final_total_price">¥ {{allPrice}}.00</span>
            </span>
          </div>
          <!-- 结算按钮 -->
          <div class="final_cartBill_btnBox">
            <el-button class="final_cartBill_btn" :loading="loading_show" @click="checkout()">结算</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cartPage',
  inject: [
    "MyMessage","MyLoading","reload"
  ],
  data () {
    return {
      msg: '',
      loading_show:false,
      cartList:[],
      goodsList:[
        { id:1,
        goodsPic:'/static/gd/gd1.png',
        goodsName:'MASK Dri-FIT Standard Issue',
        detailName:'男子套头篮球速干护脖',
        goodsPrice:599,
        goodsColor:'黑色',
        goodsCode:'DQ4921',
        goodsDescribe:'Mask Dri-FIT Standard Issue 男子套头篮球连帽衫采用导湿速干技术，巧妙糅合经典外观与现代性能体验，助你在篮球场外彰显出众风范。柔软厚实质感结合出色包覆效果，随穿随享出众体验'
        ,goodsSize:'',
        goodsNum:1
        },
      ],
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
      value: '选项1',
      smallTotalINfo:'实际商品总额指应用任何适用折扣前的订单总金额。',
      allGoodsPrice:0,
    }
  },
  mounted () {
    this.queryCartList();
  },
  computed: {
    // 获取用户信息
    userId() {
      //localStorage.userId
      return this.$route.params.userId;
    },
    allPrice(){
       let result = 0;
       for(let i = 0; i < this.cartList.length;i++){
        result +=this.cartList[i].gprice * this.cartList[i].goodsNum
       }
       result = result + 20;
       this.allGoodsPrice = result;
       return result;
    },
   
  },
  methods: {
    //获取购物车列表
    queryCartList(){
      const userid = localStorage.userId;
      // const userid = sessionStorage.userInfo.id;
      this.$axios.post('/cart/getCartList', {'userId':userid})
        .then(res => {
            console.log(res.data.data);
            if(res.data.code == 0){
                this.cartList = res.data.data;
            }else{
                this.goodsDetails.gname = '获取数据NULL'
                console.log("获取数据为空");
            }
            })
    },



    //删除购物车商品
    del_cart(cartId){
      // alert(cartId)
      this.$axios.post('/cart/delCart', {'cartId':cartId})
        .then(res => {
            console.log(res.data.data);
            if(res.data.code == 0){
                this.MyMessage("已删除" +cartId);
                setTimeout(() => {
                   this.reload();
                }, 2000);
               
            }else{
                this.MyMessage("删除失败" +cartId);
            }
        })
    },

    //结算 =>生成订单
    // 用户id  商品列表id 商品总数量 单数量 总价 订单状态
    checkout(){
      this.loading_show = true;
      // this.MyLoading(true);
      
//订单状态：   0：生成未付款； 1：已付款； 2：待收货； 3：已完成； 4：退货状态 ;  5：订单取消

      const userid = localStorage.userId;//用户id
      let goodsIdList = [];
      let goodsOwnNum = [];
      let gTotalNum=0;
      this.cartList.forEach(res=>{
        gTotalNum = gTotalNum + res.goodsNum
        goodsIdList.push(res.goodsId)
        goodsOwnNum.push(res.goodsNum)
      })
      console.log(goodsIdList);
      //  const allprice = allPrice();
       let formData = {
            userId: userid,
            goodsTotalPrice: this.allGoodsPrice,
            goodsNum: gTotalNum, //商品总数量
            orderStatus: 0,
            goodsIdList: goodsIdList, //商品id列表
            goodsOwnNum:goodsOwnNum,
      };
      console.log(formData);
      this.$axios.post('/g-order/addOrder', formData)
      .then(res => {
          console.log(res.data.data);
          if(res.data.code == 0){
            console.log("订单生成成功");
          //得到的订单Id => localStorage
          localStorage.setItem("orderId",res.data.data.oid)
            setTimeout(() => {
              this.MyLoading(false);
              this.loading_show = false;
              // this.$router.push('/checkout');
              this.$router.push({
                name:'billpage',
                params:{}  //需要获取一个userId
              });
            }, 3000);
          }else{
              this.MyMessage("订单处理发生意外！" +cartId);
          }
      }) .catch((err) => {
              console.log(err);
              this.MyMessage("订单处理发生意外！" +cartId);
            });

      
    }

  },
  
}
</script>

<style scoped>
a{
    color: #111;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6, 
label, legend, li, p, span, strong, ul{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
div{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
button{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: inherit;
    border: none;
    cursor: pointer;
    line-height: inherit;
    overflow: visible;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    padding: 0;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
    /* -webkit-appearance: none; */
}

.CartPage{
  position: relative;
  z-index: 4;
  margin-top: 30px;
  /* border: 1px solid red; */
  /* height: 100%; */
  width: 100%;
}
.cartWrapper{
  margin: 0 auto;
  position: relative;
  width: 70%;
  /* height: auto; */
  display: flex;
  padding: 5px;
  /* border: 1px solid rgb(210, 15, 180); */
}

/* 左边 */
.left_cartInfo{
  width: 70%;
  /* border: 1px solid rgb(9, 88, 185); */
}
/* h4 */
.left_cartInfo_title{
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
}
.left_cartInfo_box{
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.left_cartInfo_box_1{
   display: flex;
flex-direction: column;
  box-shadow: rgb(229 229 229) 0px 0px 0px 0px inset, rgb(229 229 229) 0px 0px 0px 0px inset, rgb(229 229 229) 0px -1px 0px 0px inset, rgb(229 229 229) 0px 0px 0px 0px inset;
  padding: 24px 0px;
  width: 100%;
}
.cart_item{
  display: flex;
}
.cart_item .item_part_left{
  width: 180px;
  padding-right: 16px;
  display: table-cell;
  vertical-align: top;
  margin: 0px;
}
.item_part_left .item_imageEp{
  max-width: 100%;
}
.item_part_rightetss{
  display: flex;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex-grow: 1;
}
.cart_item .item_part_right{
    display: flex;
    position: relative;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
/*  */
.item_part_right .item_part_rl{
  display: flex;
  flex-direction: column;
}
.item_part_rl_content{
  display: flex;
  flex-direction: column;
}
.item_part_rl_content_p{
  width: 100%;
  font-size: 16px;
  font-weight: 500;
}
.item_part_rl_content_p2{
    margin-top: 2px;
    color: rgb(117, 117, 117);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.item_part_rl_content_p3{
    margin-top: 10px;
    color: rgb(117, 117, 117);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}
.item_part_rl_content_span1{
  top: 9px;
  position: relative;
   z-index: 2;
}
.item_part_rl_content_span2{
  top: 8px;
  position: relative;
   z-index: 2;
}
.item_part_rl_content_select1{
  width: 100px;
 
  position: relative;
  top: 1px;
  right: 8px;
  z-index: 1;
}
.item_part_rl_content_select2{
  width: 100px;
  position: relative;
  top: -1px;
  right: 8px;
  z-index: 1;
  
}
.item_part_rl_content_select1 >>> .el-input--suffix .el-input__inner{
border-color: transparent !important;
}
.item_part_rl_content_select2 >>> .el-input--suffix .el-input__inner{
border-color: transparent !important;
}
.el-select-dropdown__item{
  padding-left: 10px !important;
  font-size: 14px;
  font-weight: 500;
  padding-top: 5px !important;
}
/* .el-select-dropdown__item >>> span{
  margin-top: 5px;
  padding: 4px;
} */
.el-select-dropdown__item.selected{
  color: #424243 !important;
  
}




/* price */
.item_part_rr{
  display: flex;
  flex-direction: column;
  vertical-align: top;
  text-align: right;
}
.item_part_rr_price{
  margin-right: 10px;
  color: rgb(17, 17, 17);
  font-weight: 400;
}

.item_part_action{
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.item_part_action .item_info_btn{
  margin-right: 16px;
  display: inline-block;
}
.item_info_btn .btns{
      display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    background: 0px 0px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;
    padding: 4px 0px;
    color: rgb(17, 17, 17);
    box-shadow: none;
}

/* 说明 运费 位置 */
.item_explain_box{
  margin-top: 20px;
  font-size: 16px;
}
.item_explain_box_1{
  white-space: normal;
}
.item_explain_info_1{
  font-weight: 500;
}
.item_explain_info_2{
  display: inline;
}
.item_explain_editSite{
  display: inline;
}
.item_explain_btn{
  margin-left: 0.25em;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: 0px 0px;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: rgb(17,17,17) 0px -1px 0px 0px inset;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  transition: all 0.5s ease 0s;
}

/* 右边 ***************************************** */
.right_cartbill{
    vertical-align: top;
    margin-bottom: 16px;
    padding-left: 13px;
    padding-right: 8px;
    -webkit-box-flex: 1;
    flex-grow: 1;
  /* position: relative;
  margin-left: 20px; */
  height: 400px;
  width: 30%;
  /* border: 1px solid rgb(25, 190, 3); */
}
right_cartbill_1{
    padding: 0px 8px;
    margin-top: 0px;
    margin-bottom: 24px;
    vertical-align: top;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.right_cartbill_h4{
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
}
.cartbill_smallTotal{
  margin-bottom: 14px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.cartbill_smallTotal_icon{
  position: relative;
  right: 82px;
  top: 3px;
  display: inline;
  cursor: pointer;
}

.price_smallTotal{
  text-align: right;
}
.price_smallTotal_info{
  font-weight: 400;
}

.final_total_cartBill{
    padding: 16px 0px;
    border-top: 1px solid rgb(229, 229, 229);
    border-bottom: 1px solid rgb(229, 229, 229);
}
.final_total_cartBill_2{
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin: 12px 0px;
    text-align: right;
}
.final_total_price{
    font-weight: 500;
    line-height: 1.5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.final_cartBill_btnBox{
    display: block;
    position: relative;
    padding-top: 20px;
    margin: 0px;
    box-shadow: none;
}
.final_cartBill_btn{
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease 0s;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    line-height: 1.5;
    margin-bottom: 12px;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 16px;
}
.final_cartBill_btn:hover{
  background: rgb(54, 54, 54);
}
</style>
